<template>
  <a-drawer
    title="选择绑定列表"
    :visible="visible"
    :destroyOnClose="true"
    :width="1000"
    :body-style="{
      paddingBottom: '80px',
      height: 'calc(100% - 110px)',
      boxSizing: 'border-box',
      overflow: 'auto',
    }"
    :maskClosable="true"
    @close="closeModal"
  >
    <a-table
      :columns="houseColumns"
      :data-source="houseList"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      :rowSelection="rowSelection"
      rowKey="id"
    >
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'bill_cost_type'">
          <span
            >{{ record.bill_cost_type.bigName }} /{{
              record.bill_cost_type.name
            }}
          </span>
        </template>
      </template>
    </a-table>

    <div class="drawer-footer">
      <a-button class="mr-10" @click.prevent="closeModal">取消</a-button>
      <a-button type="primary" @click.prevent="onSubmit">确定</a-button>
    </div>
  </a-drawer>
</template>

<script>
import {
  computed,
  defineComponent,
  reactive,
  ref,
  toRaw,
  toRefs,
  watch,
} from "vue";
import { Form, message, notification } from "ant-design-vue";
import request from "@/common/utils/request";
import store from "@/store";
import _ from "lodash";

export default defineComponent({
  name: "SelectHouseList",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
    rows: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      houseColumns: HOUSE_COLUMNS,
      houseList: [],
      loading: false,
      selectRows: [],
      selectedRowKeys: [],
    });

    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));
    /* 选择 */
    const rowSelection = computed(() => ({
      type: "radio",
      selectedRowKeys: state.selectedRowKeys,
      onChange: onSelectedRowChange,
      getCheckboxProps: getCheckboxProps,
    }));

    // 禁用逻辑
    const isDisabled = (item) => {
      return !item?.ownerIds?.length;
    };

    const getCheckboxProps = (record) => {
      return {
        disabled: isDisabled(record),
      };
    };

    const onSelectedRowChange = (keys, rows) => {
      state.selectedRowKeys = keys;
      state.selectRows = rows;
    };

    // 提交
    const onSubmit = () => {
      if (state.selectedRowKeys.length) {
        emit("submitSelect", state.selectRows);
      } else {
        message.warn("请选择绑定列表");
      }
    };

    // 触发关闭
    const closeModal = () => {
      emit("closeModal");
    };

    const getTableList = () => {
      let params = {};
      params.page = page.value;
      params.limit = limit.value;
      params.charge_id = props.id;
      state.loading = true;
      request
        .get("/org", "/coupon/chargeVillageBillList", params)
        .then((res) => {
          total.value = res?.total || 0;
          state.houseList = res?.list || [];
          state.loading = false;
        })
        .catch((err) => {
          state.loading = false;
        });
    };

    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
      getTableList();
    };

    const init = () => {
      if (props.id) {
        getTableList();
      }
      if (props.rows.length) {
        state.selectedRowKeys = [props.rows[0].id];
        state.selectRows = _.cloneDeep(props.rows);
      }
    };

    const resetData = () => {
      page.value = 1;
      limit.value = 10;
      total.value = 0;
      state.houseList = [];
      state.loading = false;
      state.selectRows = [];
      state.selectedRowKeys = [];
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          // 打开时初始化数据
          init();
        } else {
          // 关闭时重置数据
          resetData();
        }
      }
    );
    return {
      ...toRefs(state),
      pagination,
      rowSelection,
      closeModal,
      onSubmit,
      handleTableChange,
    };
  },
});

const HOUSE_COLUMNS = [
  {
    title: "费用类型",
    dataIndex: "bill_cost_type",
    key: "bill_cost_type",
    width: "15%",
    fixed: "left",
  },
  {
    title: "绑定日期",
    dataIndex: "created_at",
    key: "created_at",
    width: "20%",
  },
  {
    title: "账单开始时间",
    dataIndex: "start_date",
    key: "start_date",
    width: "15%",
  },
  {
    title: "账单结束时间",
    dataIndex: "end_date",
    key: "end_date",
    width: "15%",
  },
  {
    title: "付款时间规则",
    dataIndex: "payDailyTxt",
    key: "payDailyTxt",
    width: "20%",
  },
  {
    title: "绑定项目",
    dataIndex: "village_name",
    key: "village_name",
    width: "15%",
  },
];
</script>

<style lang="less" scoped></style>
